import React from 'react'
//显示待办事项
import { useSelector,useDispatch } from 'react-redux'
import { toggleTodo } from '../redux/actions/todoActions.ts'
import './TodoList.css';

export default function TodoList() {
  const todos = useSelector((state)=>state.todos)
  const dispatch = useDispatch()
  return (
    <div>
      <h1>任务列表清单</h1>
      <ul>
        {todos.map((todo)=>(
          <li key={todo.id} onClick={()=>dispatch(toggleTodo(todo.id))}  style={{
            textDecoration: todo.completed ? 'line-through' : 'none',
            cursor: 'pointer',
          }}>{ !todo.completed && todo.text}</li>
        ))}
      </ul>
      <h2>已完成</h2>
      <ul>
        { todos.map((todo)=>(todo.completed && <li key={todo.id} onClick={()=>dispatch(toggleTodo(todo.id))}  style={{
            textDecoration: todo.completed ? 'line-through' : 'none',
            cursor: 'pointer',
          }} >{todo.text}</li>))}
       
      </ul>
    </div>
  )
}
